<!DOCTYPE html>
<html>
  
  <head>
      <meta charset="UTF-8">
      <title>购票</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" href="/booking2/css/font.css">
      <link rel="stylesheet" href="/booking2/css/xadmin.css">
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="/booking2/lib/layui/layui.js" charset="utf-8"></script>
      <script type="text/javascript" src="/booking2/js/xadmin.js"></script>
      <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
      <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  
  <body background="/booking/images/home/banner.jpg">
    <div class=" text-center layui-col-lg12" style="text-align: center;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend class="x-red">购票成功</legend>
        </fieldset>
    </div>
    <div class=" layui-col-md4">欢乐谷之夜</div>
    <div class="x-body layui-col-md4">
            <fieldset class="layui-elem-field layui-bg-red">
                <legend>请及时付款</legend>
                <div class="layui-field-box layui-bg-gray " style="text-align: center;">
                    <img src="/booking/images/sss.png">
                    <legend >请在10分钟以内付款！否则订单取消！</legend>
                    <blockquote class="layui-elem-quote" style="margin-top: 10px;">
                        <div id="test2"></div>
                    </blockquote>
                </div>
    </fieldset>
    </div>
    <script>

        layui.use(['util', 'laydate', 'layer'], function(){
            var util = layui.util
                ,laydate = layui.laydate
                ,$ = layui.$
                ,layer = layui.layer;
            //固定块
            util.fixbar({
                bar1: true
                ,bar2: true
                ,css: {right: 50, bottom: 100}
                ,bgcolor: '#393D49'
                ,click: function(type){
                    if(type === 'bar1'){
                        layer.msg('icon 是可以随便换的')
                    } else if(type === 'bar2') {
                        layer.msg('两个 bar 都可以设定是否开启')
                    }
                }
            });

            //倒计时
            var min = 10;
            var sec = 0;
            var daJishi = setInterval(function () {
                var str = '剩余'+min +':'+sec;
                lay('#test2').html(str);

                if(sec==0){
                    min--;
                    sec=59;
                }else{
                    sec--;
                }
                if(sec<=0&&min<=0){
                    clearTimeout(daJishi);
                }
            },1000)
        });
    </script>
  </body>

</html>